import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import { ChatHeadMould } from "../../chatMould/mould";
import Item from "./item";
import { Scrollbars } from "react-custom-scrollbars-2";
import socket from "@depjs/socketClient";
import { profile } from "@depjs/storage";
import { connect } from "react-redux";
import {
    isShowAddFriendBounced,
    selectItemNameShowChatHead,
} from "@redux/actions02";
import { request } from "@apis/request";
import toast from "@utils/showToast";

const NewFriendsList = (props) => {
    const { isShowAddFriendBounced, selectItemNameShowChatHead } = props;

    const [list, setList] = useState([]);
    const [value, setValue] = useState("");
    const [addInfo, setAddInfo] = useState("");
    const [isShowAddBounced, setIsShowAddBounced] = useState(false);

    const transInfo = (info) => {
        setIsShowAddBounced(true);
        setAddInfo(info);
        setValue(info);
    };

    const confirmAdd = async () => {
        if (!value.trim()) {
            toast.fail("备注名不能为空！");
            return;
        }
        const res = await request(
            "/chat/acceptOtherApply",
            { uname: addInfo, byname: value },
            "post"
        );
        if (res.code === "0000") {
            toast.success("你们现在是好友啦！");
            setList((list) => list.filter((item) => item.userName !== addInfo));
            socket.emit("i accept your apply", {
                apply: addInfo,
                accept: profile.userName,
            });
        } else {
            toast.fail(res.message);
        }
        setIsShowAddBounced(false);
        isShowAddFriendBounced(false);
    };

    useEffect(() => {
        const getAddMeList = async () => {
            const res = await request("/chat/applyMeFriends");
            if (res.code === "0000") {
                setList(res.data);
            }
        };
        getAddMeList();
    }, []);

    useEffect(() => {
        socket.on("someone add you", (msg) => {
            const { to, addMeData } = msg;
            if (to === profile.userName) {
                setList((list) => [addMeData, ...list]);
            }
        });
    }, []);

    useEffect(() => {
        selectItemNameShowChatHead("新的朋友");
    }, [selectItemNameShowChatHead]);

    return (
        <>
            <ChatHeadMould />
            <div className={styles.list_main}>
                <Scrollbars autoHide>
                    <ul className={styles.new_list_ul}>
                        {list &&
                            list.map((item, index) => {
                                return (
                                    <Item
                                        key={index}
                                        item={item}
                                        transInfo={transInfo}
                                    />
                                );
                            })}
                    </ul>
                </Scrollbars>
                <div
                    className={styles.accept_add}
                    style={{ display: isShowAddBounced ? "block" : "none" }}
                >
                    <p className={styles.title}>确定要接受TA成为好友吗?</p>
                    <div className={styles.accept_main}>
                        <p className={styles.tip}>给好友备注个名字吧</p>
                        <input
                            type="text"
                            className={styles.inp_add}
                            value={value}
                            onChange={(e) => {
                                setValue(e.target.value);
                            }}
                        />
                    </div>
                    <div className={styles.oper_btns}>
                        <div className={styles.oper_btn1} onClick={confirmAdd}>
                            确定
                        </div>
                        <div
                            className={styles.oper_btn2}
                            onClick={() => {
                                isShowAddFriendBounced(false);
                                setIsShowAddBounced(false);
                            }}
                        >
                            取消
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default connect((state) => state, {
    isShowAddFriendBounced,
    selectItemNameShowChatHead,
})(NewFriendsList);
